<!DOCTYPE html><!--HTML5 doctype-->
<html>
    <head>
        <title>Powered by appStarter</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style>           
			.carousel_paging {
				border-radius: 10px;
				border: 3px solid white;
				background: #ccc;
				width: 10px;
				height: 10px;
				float: left;
			}
		
			.carousel_paging_selected {
				border-radius: 10px;
				border: 3px solid white;
				background: #000;
				width: 10px;
				height: 10px;
				float: left;
			}
		
			.spacer {
				width: 10px;
				float: left;
			}
		
			.carousel_content {
				-webkit-transform: translate3d(0, 0, 0);
    		}
        </style>
        <link rel='stylesheet' type='text/css' href='css/jq.ui.eco.css' />
        <link rel="stylesheet" type="text/css" href="css/icons.css">
        <script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
        <script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script>  
        <script type="text/javascript" charset="utf-8" src="libs/jq.ui.min.js"></script> 
        <script type="text/javascript" charset="utf-8" src="libs/jq.web.min.js"></script> 
        <script type="text/javascript" charset="utf-8" src="libs/xpromo.js"></script> 
        
        <script type="text/javascript">
        /* This function runs once the page is loaded, but appMobi is not yet active */
        var preroll=false;
        $.ui.autoLaunch=false;
        var init = function(){
          
        };
        document.addEventListener("DOMContentLoaded",init,false);  

        /* This code is used to run as soon as appMobi activates */
        var onDeviceReady=function(){
            AppMobi.device.setRotateOrientation("portrait");
            AppMobi.device.setAutoRotate(false);
            //hide splash screen
            AppMobi.device.hideSplashScreen();	
            
            
            if(preroll){
                AppMobiPromotion.getInterstitial();
            }
            $.ui.launch();
        };
        document.addEventListener("appMobi.device.ready",onDeviceReady,false);    
        </script>

    </head>
    <body>
        <div id="jQUi">
            <div id="splashscreen" class='ui-loader'>
            	<span class='ui-icon ui-icon-loading spin'></span><h1 >Iniciando</h1>
        	</div>
        
            <div id="header"></div>
            <div id="content">
                <div id='main' title='Main Page' selected=true class='panel'>
                    <ul>    
                        <li><a href='#home'>home</a></li>
                        <li><a href='#camera'>camera</a></li>
                        <li><a href='#calendario'>calendario</a></li>
                    </ul>
                </div>
                <div id='info' title='Informações' class='panel' scrolling='yes'>
                    You can add whatever content you like
                </div>       
                <div id='camera' title='camera' class='panel' scrolling='yes'>
                    <ul>
                        <li><a href='#main'>Link 1</a></li>
                        <li><a href='#main'>Link2</a></li>
                    </ul>
                </div>
                <div id='calendario' title='calendario' class='panel' scrolling='no'>
            
                    <script>
                        function init_carousel_calendario() {
                            $('#carousel_calendario').carousel({
                                pagingDiv: 'carousel_dots_calendario',
                                pagingCssName: 'carousel_paging',
                                pagingCssNameSelected: 'carousel_paging_selected'
                            });
                        }
                        document.addEventListener('DOMContentLoaded', init_carousel_calendario, false);
                    </script>
                    <div id='carousel_calendario' style='overflow: hidden; height: 80%; width: 100%; float: left;'>
                        <!-- create a div for each page in the carousel width: 318px; height: 200px; -->
                        <div style='float: left; width: 100%; height: 80%; background: yellow;'></div>
                        <div style='float: left; width: 100%; height: 80%;  background: green;'></div>
                        <div style='float: left; width: 100%; height: 80%;  background: blue;'></div>
                        <div  style='float: left; width: 100%; height: 80%; background: pink;'></div>
                    </div>
                    <div id='carousel_dots_calendario'	style='text-align: center; margin-left: auto; margin-right: auto; clear: both; position: relative; top: 10px; z-index: 200'></div>
                </div>
            </div>
            <div id='navbar'>
                <a href='#main' data-transition='up' class='icon home'>home</a>
                <a href='#camera' data-transition='down' class='icon camera'>camera</a>
                <a href='#calendario' data-transition='flip' class='icon calendar'>calendario</a>
            </div>
            <nav>
                <div class='title'>Home</div>
                <ul>
                    <li><a href='#info' data-transition='up'>Informações</a></li>
                    <li><a href='#camera' data-transition='down'>camera</a></li>
                    <li><a href='#calendario' data-transition='flip'>calendario</a></li>
                </ul>
            </nav> 
        </div>
    </body>
</html>
